import { PageContainer } from '@ant-design/pro-components';
import { Button } from 'antd';
import React, { useState } from 'react';
import { useNavigate } from '@@/exports';
import Product from './product';
import Order from './order';
import Setting from './setting';

export default () => {
  let navigate = useNavigate();
  const [page, setPage] = useState("product");

  return (
    <div
      style={{
        background: '#F5F7FA',
      }}
    >
      <PageContainer
        fixedHeader
        extra={[
          <Button key="addShop" type="default" onClick={async () => navigate('/shop')}>
            返回店铺列表
          </Button>,
        ]}
        header={{
          title: '萌心芽小红旗舰店',
        }}
        tabList={[
          {
            tab: '商品管理',
            key: 'product',
          },
          {
            tab: '订单管理',
            key: 'order',
          },
          {
            tab: '其他设置',
            key: 'setting',
          },
        ]}
        onTabChange={(key) => {
          setPage(key);
        }}
      >
        {page === "product" && <Product />}
        {page === "order" && <Order />}
        {page === "setting" && <Setting />}
      </PageContainer>
    </div>
  );
}